<link href="/static/css/register.css?v=2017629" rel="stylesheet" type="text/css">
<canvas id="canvas"></canvas>
<header>
    <div class="reg-btn-panel">
        <a class="title" href="/">雄鹰杯首页</a>
        <a class="reg-btn" href="/home/index/register">马上报名</a>
    </div>
</header>
<div class="box" >
    <div class="title-panel">
        <div class="top">REGISTER</div>
        <div><span class="title">报名</span></div>
    </div>
    <div class="register-panel">
        <form id="register-form" action="{$submit_url}">
            <div class="form-group">
                <label>*姓名</label>
                <input name="name" class="input w200" placeholder="输入姓名">
            </div>
            <div class="form-group">
                <label>电子邮箱</label>
                <input name="email" class="input w300"  placeholder="输入电子邮件">
            </div>
            <div class="form-group">
                <label>*电话</label>
                <input name="phone" class="input w200"  placeholder="输入联系电话">
            </div>
            <div class="form-group">
                <label>参赛组别</label>
                <select name="group" class="input w300">
                    {foreach $group_list as $item}
                    <option value="{$item.title}">{$item.title}</option>
                    {/foreach}
                </select>
            </div>
            <div class="form-group">
                <label>是否有兽医执业资格证书</label>
                <div class="check-btn-group">
                    <label class="check-btn active"><input  name="has_per" value="1" type="radio" checked>有</label>
                    <label class="check-btn"><input name="has_per" value="0" type="radio">没有</label>
                </div>
            </div>
            <div class="form-group">
                <label>*执业年龄</label>
                <input name="work_age" class="input w200"  placeholder="输入执业年限">
            </div>
            <div class="form-group">
                <label>*岗位职称</label>
                <input name="work_name" class="input w300"  placeholder="输入职称">
            </div>
            <div class="form-group">
                <label>*就职医院</label>
                <input name="hospital" class="input w400"  placeholder="输入医院全名">
            </div>
            <div class="form-group">
                <label>居住省份</label>
                <input name="province" class="input w200"  placeholder="输入省份名">
            </div>
            <div class="form-group">
                <label>居住城市</label>
                <input name="city" class="input w200"  placeholder="输入城市名">
            </div>
            <div class="form-group">
                <label></label>
                <a class="btn btn-info text-center" style="padding: 10px 40px;" href="javascript:submit()">提交</a>
            </div>
        </form>
    </div>
</div>

<script>
    $(".check-btn-group").on("click",".check-btn",function ()
	{
		var obj=$(this).eq(0);
		var bro_btns=obj.parent().find(".check-btn");
		bro_btns.removeClass("active");
		obj.addClass('active');
		bro_btns.find("input").attr("checked",false);
		obj.find("input").attr("checked",true);
	});
    function submit()
	{
		$("#register-form").submit();
	}
    $("#register-form").on("submit",function (e)
	{
		e.preventDefault();
		M_App.ajaxForm($(this));
	});
</script>
<script>
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var cw = canvas.width = window.innerWidth,
		cx = cw / 2;
	var ch = canvas.height = window.innerHeight,
		cy = ch / 2;

	ctx.fillStyle = "#333";
	var linesNum = 16;
	var linesRy = [];
	var requestId = null;

	function Line(flag) {
		this.flag = flag;
		this.a = {};
		this.b = {};
		if (flag == "v") {
			this.a.y = 0;
			this.b.y = ch;
			this.a.x = randomIntFromInterval(0, ch);
			this.b.x = randomIntFromInterval(0, ch);
		} else if (flag == "h") {
			this.a.x = 0;
			this.b.x = cw;
			this.a.y = randomIntFromInterval(0, cw);
			this.b.y = randomIntFromInterval(0, cw);
		}
		this.va = randomIntFromInterval(25, 100) / 100;
		this.vb = randomIntFromInterval(25, 100) / 100;

		this.draw = function() {
			ctx.strokeStyle = "#eee";
			ctx.beginPath();
			ctx.moveTo(this.a.x, this.a.y);
			ctx.lineTo(this.b.x, this.b.y);
			ctx.stroke();
		}

		this.update = function() {
			if (this.flag == "v") {
				this.a.x += this.va;
				this.b.x += this.vb;
			} else if (flag == "h") {
				this.a.y += this.va;
				this.b.y += this.vb;
			}

			this.edges();
		}

		this.edges = function() {
			if (this.flag == "v") {
				if (this.a.x < 0 || this.a.x > cw) {
					this.va *= -1;
				}
				if (this.b.x < 0 || this.b.x > cw) {
					this.vb *= -1;
				}
			} else if (flag == "h") {
				if (this.a.y < 0 || this.a.y > ch) {
					this.va *= -1;
				}
				if (this.b.y < 0 || this.b.y > ch) {
					this.vb *= -1;
				}
			}
		}

	}

	for (var i = 0; i < linesNum; i++) {
		var flag = i % 2 == 0 ? "h" : "v";
		var l = new Line(flag);
		linesRy.push(l);
	}

	function Draw() {
		requestId = window.requestAnimationFrame(Draw);
		ctx.clearRect(0, 0, cw, ch);

		for (var i = 0; i < linesRy.length; i++) {
			var l = linesRy[i];
			l.draw();
			l.update();
		}
		for (var i = 0; i < linesRy.length; i++) {
			var l = linesRy[i];
			for (var j = i + 1; j < linesRy.length; j++) {
				var l1 = linesRy[j]
				Intersect2lines(l, l1);
			}
		}
	}

	function Init() {
		linesRy.length = 0;
		for (var i = 0; i < linesNum; i++) {
			var flag = i % 2 == 0 ? "h" : "v";
			var l = new Line(flag);
			linesRy.push(l);
		}

		if (requestId) {
			window.cancelAnimationFrame(requestId);
			requestId = null;
		}

		cw = canvas.width = window.innerWidth,
			cx = cw / 2;
		ch = canvas.height = window.innerHeight,
			cy = ch / 2;

		Draw();
	}

	setTimeout(function() {
		Init();

		addEventListener('resize', Init, false);
	}, 15);

	function Intersect2lines(l1, l2) {
		var p1 = l1.a,
			p2 = l1.b,
			p3 = l2.a,
			p4 = l2.b;
		var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
		var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;
		var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;
		var x = p1.x + ua * (p2.x - p1.x);
		var y = p1.y + ua * (p2.y - p1.y);
		if (ua > 0 && ub > 0) {
			markPoint({
						  x: x,
						  y: y
					  })
		}
	}

	function markPoint(p) {
		ctx.fillStyle = "#eee";
		ctx.beginPath();
		ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
		ctx.fill();
	}

	function randomIntFromInterval(mn, mx) {
		return ~~(Math.random() * (mx - mn + 1) + mn);
	}
</script>